@charset "UTF-8";
.before {
    padding: 1em;
    background-color: #fff;
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.before:hover {
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
}

.after {
    position: relative;
    /* [1] */
    
    padding: 1em;
    background-color: #fff;
}
.after:before {
    content: "";
    /* [1] */
    
    position: absolute;
    /* [1] */
    
    top: 0;
    /* [1] */
    
    right: 0;
    /* [1] */
    
    bottom: 0;
    /* [1] */
    
    left: 0;
    /* [1] */
    
    z-index: -1;
    /* [1] */
    
    box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.3);
    /* [2] */
    
    opacity: 0;
    /* [3] */
    
    will-change: opacity;
    /* [4] */
    
    -webkit-transition: 0.2s;
    transition: 0.2s;
}
.after:hover:before {
    opacity: 1;
    /* [5] */
}
/**
 * Nothing to see here…
 */

html {
    background-color: #f9f9f9;
    padding: 50px;
}
code {
    font-family: monospace, monospace;
}